<template>
  <div style="width: 500px">
    <el-input
      placeholder="输入部门名称进行搜索..."
      v-model="filterText">
    </el-input>

    <el-tree
      class="filter-tree"
      :data="deps"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node = "false"
      ref="tree">
      <span class="custom-tree-node" slot-scope="{ data }" style="display: flex;
            justify-content: space-between; width: 100%">
        <span>{{ data.name }}</span>
        <span>
          <el-button
            type="primary"
            size="mini"
            class="btn"
            @click="() => addDep(data)">
            添加部门
          </el-button>
          <el-button
            type="danger"
            size="mini"
            class="btn"
            @click="() => deleteDep(data)">
            删除部门
          </el-button>
        </span>
      </span>
    </el-tree>
    <el-dialog
      title="修改部门"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div>
        <table>
          <tr>
            <td>
              <el-tag>上级部门</el-tag>
            </td>
            <td>{{pname}}</td>
          </tr>
          <tr>
            <td>
              <el-tag>部门名称</el-tag>
            </td>
            <td>
              <el-input v-model="dep.name" placeholder="请输入部门名称..." size="small"></el-input>
            </td>
          </tr>
        </table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDep()">取 消</el-button>
        <el-button type="primary" @click="submitDep()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: "depMana",
    data(){
      return{
        filterText: '',
        deps:[],
        dep:{
          name:"",
          parentId: -1,
        },
        pname: "",
        defaultProps: {
            children: 'children',
            label: 'name'
        },
        dialogVisible: false,
      }
    },
    created(){
      this.initDeps(); 
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    methods:{
      addDeps(deps,dep){
        for(var i = 0 ; i < deps.length; i++){
          var d = deps[i];
          if(d.id == dep.parentId){
            d.children = d.children.concat(dep);
            if(d.children.length > 0){
              d.isParent = true;
            }
            return;
          }else{
            this.addDeps(d.children,dep);
          }
        }
      },
      submitDep(){
        this.$post("/system/basic/department/",this.dep).then(res => {
          if(res){
            this.addDeps(this.deps,res.data);
            this.dialogVisible = false;
            this.dep.name = '';
            this.dep.parentId = -1;
            this.pname = '';
          }
        })
      },
      addDep(data){
        this.pname = data.name;
        this.dep.parentId = data.id;
        this.dialogVisible = true;
      },
      cancelDep(){
        this.dialogVisible = false;
        this.dep.name = "";
      },
      removeDepFromDeps(p,deps,id){
        for(var i = 0; i< deps.length; i++){
          var d = deps[i];
          if(d.id == id){
            deps.splice(i,1);
            if(deps.length == 0){
              p.isParent = false;
            }
            return;
          }else{
            this.removeDepFromDeps(d,d.children,id);
          }
        }
      },
      deleteDep(data){
        if(data.isParent){
          this.$message.error("父部门删除失败!")
        }else {
           this.$confirm(
            "此操作将永久删除该[" + data.name + "]部门, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$deletefn("/system/basic/department/"+data.id).then(res => {
                if(res){
                  this.removeDepFromDeps(null,this.deps,data.id);
                }
              })
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        }
      },
      initDeps(){
        this.$get("/system/basic/department/").then(res=>{
          if(res){
            this.deps = res;
          }
        })
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
    }

}
</script>

<style scoped>
  .btn{
    padding: 2px;
  }

</style>